<template>
  <el-form class="query-container" ref="queryFormRef" :model="queryParams" :inline="true" @submit.native.prevent>
    <el-form-item label="" prop="field" style="margin-right:5px!important">
      <el-select v-model="queryParams.field" style="width:150px;">
        <el-option value="name" label="客户姓名"></el-option>
        <el-option value="contact_phone" label="查询手机号"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="" prop="keyword">
      <el-input v-model="queryParams.keyword" clearable placeholder="输入关键字查询" @keyup.enter.native="handleQuery" style="width:150px"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleQuery">搜索</el-button>
      <el-button @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>
  <!--  查询列表-->
  <el-table v-loading="loading" :data="tableData">
    <el-table-column prop="id" label="客户编号" align="center"></el-table-column>
    <el-table-column prop="name" label="客户姓名" align="center" show-overflow-tooltip></el-table-column>
    <el-table-column prop="contactPhone" label="联系电话" min-width="100" align="center"></el-table-column>
    <el-table-column prop="propertyName" label="楼盘名称" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column prop="designers" label="设计师id" align="center" show-overflow-tooltip></el-table-column>
    <el-table-column prop="manager" label="客户经理" align="center"  ></el-table-column>
    <el-table-column prop="followUpResults" label="跟单结果" align="center" :formatter="followUpResultsFormatter"></el-table-column>
    <el-table-column prop="collectionTime" label="收款时间" align="center"></el-table-column>
    <el-table-column prop="depositAmount" label="定金金额" min-width="100" align="center"></el-table-column>
    <el-table-column prop="paymentMethod" label="收款方式" align="center" :formatter="paymentMethodFormatter"></el-table-column>
    <el-table-column prop="recipient" label="收款人" min-width="100" align="center"></el-table-column>
    <el-table-column label="操作" align="center" fixed="right" width="180">
      <template #default="scope">
        <el-button type="primary" link @click="goToEditView(scope.row.id) " v-if="$hasPermission('crm:finance:deposit:add') && scope.row.followUpResults != 20" >录入</el-button>
        <el-button type="primary" link @click="goSelectMoneyView(scope.row.id)" v-if="$hasPermission('crm:finance:deposit:select') && scope.row.followUpResults !== 30" >查看</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      :total="total"
      v-model:current-page="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import request from "@/utils/request";
import {useRouter} from "vue-router";

const router = useRouter();
const selectedIds = ref([])
const loading = ref(false);

//form对象
const queryFormRef = ref();
//分页
const total = ref(0);
//保存查询数组
const tableData = ref([]);
// 定义查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  field: '请选择查询类型',
  keyword: undefined,
})
//查询集合数据
const listData = () => {
  loading.value = false;
  request.get('/api/crm/deposit/select',{params: queryParams.value}).then((res) => {
    tableData.value = res.data.list;
    total.value = res.data.total;
    loading.value=false;
  })
}
const handleQuery = () => {
  queryParams.value.pageNum = 1
  listData()
}
const handleCurrentChange = (val) => {
  queryParams.value.pageNum = val
  listData()
}

const handleSizeChange = (val) => {
  queryParams.value.pageSize = val
  listData()
}

const resetQuery = () => {
  loading.value = false;
  queryParams.value.keyword = null;
  listData();
}
const goToEditView = (id) => {
  router.push({path: '/crm/earnest_money/add_money', query: {id: id}})
}
//定义处理跟单结果的显示文字转换
const followUpResultsFormatter = (row, column, cellValue, index) => {
  if (cellValue == 20) {
    cellValue = '已订单（财务已收款)';
  } else if (cellValue !=30) {
    cellValue = '已订单（财务待收款)';
  }
  return cellValue;
}
//定义处理收款方式的显示文字转换
const paymentMethodFormatter = (row, column, cellValue, index)=>{
  if (cellValue == 10) {
    cellValue = '微信';
  } else if (cellValue == 20) {
    cellValue = '支付宝';
  } else if (cellValue == 30){
    cellValue = '银行卡/信用卡'
  }else if (cellValue == 40){
    cellValue = '先现金'
  }
  return cellValue;
}
const goSelectMoneyView = (id)=>{
  router.push({path: '/crm/earnest_money/select_money', query: {id: id}})
}
onMounted(() => {
  listData();
})
</script>

<style scoped>

</style>
